<template>
<view>
	<view class="charts-container">
	  <!-- 顶部标题和筛选区域 -->
	  <view class="header-container">
	    <view class="header-left">
	      <text class="title">销售数据分析平台</text>
	      <text class="subtitle">多维度业务数据可视化展示</text>
	    </view>
	    <view class="header-right">
	      <view class="filter-item">
	        <text class="filter-label">时间范围:</text>
	        <picker class="filter-picker" :range="dateRanges" @change="onDateChange">
	          <view class="filter-value">{{selectedDateRange}}</view>
	        </picker>
	        <uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
	      </view>
	      
	      <button class="refresh-btn" @click="GetHome()">
	        <uni-icons type="refresh" size="18"></uni-icons>
	        <text>刷新数据</text>
	      </button>
	    </view>
	  </view>
	  
	  <!-- 数据摘要卡片 -->
	  <view class="summary-grid">
	    <view v-for="(item, index) in summaryData" :key="index" class="summary-card" :style="cardBorderStyle(index)">
	      <view class="card-content" :title="item.content">
	        <text class="card-title">{{item.title}}</text>
	        <text class="card-value">{{item.value}}</text>
	        
	        <view class="card-trend" :class="item.change >= 0 ? 'up' : 'down'">
	          <uni-icons :type="item.change >= 0 ? 'arrow-up' : 'arrow-down'" size="14" :color="item.change >= 0 ? '#13CE66' : '#FF4949'"></uni-icons>
	          <text>{{Math.abs(item.change)}}%</text>
	        </view>
	      </view>
	      
	    </view>
	  </view>
	  
	  <!-- 主要图表区域 -->
	  <view class="main-charts-grid">
	    <!-- 线路销售统计组合图表 -->
	    <view class="chart-card" style="grid-column: span 2;">
	      <view class="chart-header">
	        <text class="chart-title">线路销售与利润分析</text>
	        <!-- <view class="chart-tabs">
	          <view 
	            v-for="(tab, index) in ['销售数据', '利润分析']" 
	            :key="index" 
	            class="tab-item" 
	            :class="{active: currentTab === index}"
	            @click="currentTab = index"
	          >
	            {{tab}}
	          </view>
	        </view> -->
	      </view>
	      
	      <view class="chart-container">
	        <qiun-data-charts :key="mixChartIndex" type="column" :opts="mixChartOpts" :chartData="mixChartData" />
	      </view>
	    </view>
	    
	    <!-- 月度销售趋势 -->
	    <view class="chart-card" style="grid-column: span 2;">
	      <view class="chart-header">
	        <text class="chart-title">月度销售趋势</text>
	        <!-- <view class="chart-legend">
	          <view class="legend-item">
	            <view class="color-indicator" style="background-color: #5470c6;"></view>
	            <text>销售额</text>
	          </view>
	          <view class="legend-item">
	            <view class="color-indicator" style="background-color: #91cc75;"></view>
	            <text>订单量</text>
	          </view>
	        </view> -->
	      </view>
	      
	      <view class="chart-container">
	        <qiun-data-charts :key="lineChartIndex" type="line" :opts="lineChartOpts" :chartData="lineChartData" />
	      </view>
	    </view>
	  
	  
	    <!-- 品类销售分布饼图 -->
	    <view class="chart-card" style="grid-column: span 1;">
	      <view class="chart-header">
	        <text class="chart-title">品类销售分布</text>
	      </view>
	  
	      <view class="chart-container" v-if="pieData.series && pieData.series[0].data.length>0">
	        <qiun-data-charts :key="pieIndex" type="pie" :opts="pieChartOpts" :chartData="pieData"  @error="handleChartError"/>
	      </view>
	    </view>
	    
	  </view>
	</view>
</view>

</template>

<script>
export default {
  data() {
    return {
      // 筛选器数据
      dateRanges: ['昨日', '近7天', '近30天', '本月', '本季度'],
      selectedDateRange: '昨日',
 
	  select_date:0,

      // 饼图数据
	  pieIndex:0,
      pieData: {},
      pieChartOpts: {
        color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272"],
        padding: [5,5,5,5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },

      // 线路图数据
	  mixChartIndex:0,
      mixChartData: {},
      mixChartOpts: {
		color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [20, 20, 20, 15],
        xAxis: {
          disableGrid: true,
          itemCount: 4,
          scrollShow: true
        },
        yAxis: [{
          min: 0,
          max: 200000,
          format: (val) => {
            return (val / 1000).toFixed(0) + 'k'
          }
        }, {
          min: 0,
          max: 50,
          position: 'right',
          format: (val) => {
            return val + '%'
          }
        }],
        extra: {
          column: {
            width: 30,
            linearType: 'custom',
            barBorderRadius: [5, 5, 0, 0]
          },
          line: {
            width: 3,
            curve: true
          }
        }
      },
	  //折线图
	  lineChartIndex:0,
      lineChartData:{},
	  lineChartOpts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow"
          }
        }
      },
      // 摘要数据
      summaryData: [],
      
    }
  },
  created() {
    this.GetHome() 
  },
  methods: {
	handleChartError(err) {
	  console.error("图表错误:", err);
	},
	GetHome(){
		var that = this
		that.$common.get_request(
			{
				type:'home_total',
				select_date:this.select_date
			},
			(res)=>{
				that.summaryData = res.list

			},()=>{
				
			},true,
		);

		that.$common.get_request(
			{
				type:'home_header',
				select_date:this.select_date
			},
			(res)=>{
				 let series = {
				            series: [
				              {
				                data:res.list
				              }
				            ]
				          };
		
				that.pieData = JSON.parse(JSON.stringify(series))
				that.pieIndex++;
			},()=>{
			},true
		);

		that.$common.get_request(
			{
				type:'home_route',
				select_date:this.select_date
			},
			(res)=>{
			   let series = {
					categories: res.name,
					series: [
					  {
						name: "销售",
						data: res.sales,
					  },
					  {
						name: "利润",
						data: res.profit,
					  }
					]
				};
				that.mixChartData = JSON.parse(JSON.stringify(series))
				that.mixChartIndex++;
				
			},()=>{
			},true,
		);
		that.$common.get_request(
			{
				type:'home_sales',
			},
			(res)=>{
				let series = {
					categories: res.dates,
					series: [
					  {
						name: "销售额",
						data:  res.sales
					  },
					  {
						name: "订单数",
						data: res.count
					  }
					]
				  };
				that.lineChartData = JSON.parse(JSON.stringify(series))
				that.lineChartIndex++;
			},()=>{
			},true,
		);
	},
    cardBorderStyle(index) {
      // 为不同卡片增加左边界颜色
      const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
      return { 
        borderLeft: `4px solid ${colors[index % colors.length]}`,
        background: index === 0 
          ? 'linear-gradient(to right, rgba(84, 112, 198, 0.06), rgba(255, 255, 255, 0.7))' 
          : 'white'
      }
    },

    onDateChange(e) {
		this.selectedDateRange = this.dateRanges[e.detail.value]
		this.select_date = e.detail.value
    },
    
  
    

  }
}
</script>

<style lang="scss"scoped>
/* 主容器 - 响应式设计 */
.charts-container {
  background-color: #f7f9fc;
  min-height: 100vh;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  overflow: auto;
  /* PC大屏幕优化 */
  @media (min-width: 1200px) {
    max-width: 1800px;
    margin: 0 auto;
  }
}

/* 头部区域 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.header-left {
  .title {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    display: block;
  }
  
  .subtitle {
    font-size: 14px;
    color: #7f8c93;
    display: block;
    margin-top: 4px;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #f1f4f9;
  border-radius: 6px;
  cursor: pointer;
  
  .filter-label {
    font-size: 14px;
    color: #666;
    margin-right: 8px;
  }
  
  .filter-picker {
    .filter-value {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
  }
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #5470c6;
  color: white;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  border: none;
  
  &:active {
    opacity: 0.9;
  }
}

/* 数据摘要网格 */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.summary-card {
  background: white;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  justify-content: center;
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    transition: all 0.3s ease;
  }
}

.card-content {
  display: flex;
  flex-direction: column;
  z-index: 2;
  
  .card-title {
    font-size: 14px;
    color: #7f8c93;
    margin-bottom: 8px;
	text-align: center;
  }
  
  .card-value {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
	text-align: center;
  }
}

.card-trend {
	display: flex;
	align-items: center;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 12px;
	width: fit-content;
	margin: auto;
	
  &.up {
    background: rgba(19, 206, 102, 0.1);
    color: #13CE66;
  }
  
  &.down {
    background: rgba(255, 73, 73, 0.1);
    color: #FF4949;
  }
}

/* 主图表网格 */
.main-charts-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  flex: 1;
}

.chart-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
  
  &:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
  }
}

.chart-header {
  padding: 18px 24px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f2f7;
  
  .chart-title {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
  }
}


.chart-tabs {
  display: flex;
  background: #f5f7fa;
  border-radius: 6px;
  padding: 4px;
  
  .tab-item {
    padding: 6px 15px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    
    &.active {
      background: white;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      font-weight: 500;
      color: #5470c6;
    }
  }
}

.chart-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  background: #f5f7fa;
  padding: 6px 12px;
  border-radius: 4px;
}

.chart-legend {
  display: flex;
  gap: 16px;
  
  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    
    .color-indicator {
      width: 12px;
      height: 12px;
      border-radius: 2px;
    }
  }
}

.chart-container {
  height: 100%;
  width: 100%;
  height: 350px; /* 必须设置固定高度 */
  padding: 10px;
  flex: 1;
  position: relative;
}

/* 响应式调整 */
@media (min-width: 1600px) {
  .summary-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .main-charts-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    
    .chart-card {
      &:nth-child(1) { grid-row: 1; }
      &:nth-child(2) { grid-row: 1; grid-column: span 2; }
      &:nth-child(3) { grid-row: 2; grid-column: span 2; }
      &:nth-child(4) { grid-row: 2; }
    }
  }
}

@media (max-width: 1200px) {
  .main-charts-grid {
    grid-template-columns: 1fr;
    
    .chart-card {
      grid-column: span 1 !important;
    }
  }
  
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    
    .header-right {
      flex-wrap: wrap;
      width: 100%;
    }
  }
}
</style>